<template>
  <div class="service-block width_1200_auto">
    <RepositoryList :items="repositoryItems" :loading="loading"
                    @searchPractice="onSearch"></RepositoryList>
    <Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
                @change-page="changePage" style="margin: 10px 0" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { apiGetRepositoryList } from "@/api/practice";
import Pagination from "@/components/Pagination.vue";
import RepositoryList from "@/components/practice/RepositoryList.vue";

const repositoryItems = ref<any>([]);
const total = ref<number>(0);
const loading = ref<boolean>(false);

const pageInfo = ref<{
  pageNo: number;
  pageSize: number;
  repositoryTitle: string;
}>({
  // 当前页码
  pageNo: 1,
  // 当前每页显示多少条数据
  pageSize: 9,
  repositoryTitle: ""
});

async function getRepositoryList() {
  loading.value = true;
  repositoryItems.value = [];
  const data: any = await apiGetRepositoryList(pageInfo.value);
  repositoryItems.value = data.result?.records;
  total.value = data.result?.total;
  loading.value = false;
}

function changePage(pageNo) {
  pageInfo.value.pageNo = pageNo;
  getRepositoryList();
}

function onSearch(val) {
  pageInfo.value.repositoryTitle = val;
  getRepositoryList();
}

onMounted(() => {
  getRepositoryList();
});

</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";

.service-block {
  padding: 0 10px;
  margin: 10px auto;
  min-height: 89vh;
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 10px;
}

a {
  color: black;
}

a:hover {
  color: #3370ff;
}

</style>
